<template>
	<view class="mainpadding beijingse">
		<view class="neirong">
			<view class="flexbetween mainpadding ffffff radius">
				<view class="ershib">店铺名称</view>
				<input class="inputs textright" type="text" placeholder="请输入店铺名称" v-model="shop_name">
			</view>
			<view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="ershib">店铺地址</view>
				<view class="flexbetween xiahuaxian">
					<uni-data-picker  @change="bindPickerChange" :localdata="items" placeholder="请选择住址" popup-title="请选择地区" v-model="area" 
					class="zdy"
						>
						<text class="inputs1" v-if="!area.length" style="color: #888; width: 100%;">请选择住址</text>
						<text class="inputs1" style=" width: 100%;" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					</uni-data-picker>
					<view class="huiyoujt"></view>
				</view>
			</view>
			<view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="ershib">详细地址</view>
				<input  class="inputs textright" type="text" placeholder="请输入详细地址" v-model="addressdetail">
			</view>
			<view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="ershib">法人姓名</view>
				<input  class="inputs textright" type="text" placeholder="请输入法人姓名" v-model="fr_name">
			</view>
			<view class="flexbetween mainpadding ffffff radius margin_top">
				<view class="ershib">法人电话</view>
				<input  class="inputs textright" type="number" placeholder="请输入法人电话" v-model="fr_mobile">
			</view>
			<!-- 营业照 -->
			<view class="yyz margin_top" @click="uploadImg(1)">
				<image v-if="!yyzz_image" src="../../static/image/system/yyz.png" mode=""></image>
				<image v-if="yyzz_image" :src="yyzz_image" mode=""></image>
			</view>
			<!-- 身份证 -->
			<view class="flexbetween margin_top">
				<view class="shefz"  @click="uploadImg(2)">
					<image v-if="!fr_zimage" src="../../static/image/system/sfzzm.png" mode=""></image>
					<image v-if="fr_zimage" :src="fr_zimage" mode=""></image>
				</view>
				<view class="shefz"  @click="uploadImg(3)">
					<image v-if="!fr_fimage" src="../../static/image/system/sfzfm.png" mode=""></image>
					<image v-if="fr_fimage" :src="fr_fimage" mode=""></image>
					
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb" @click="submit">
			<view class="bigbtn">提交审核</view>
			<!-- 提交审核之后显示的按钮 -->
			<!-- <view class="bigbtn" @click="tzshz">查看详情</view> -->
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "../../static/city/city.js"
	export default {
		data() {
			return {
				area: [], //收获地址
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				items: citys.data,
				addressdetail:"",
				fr_mobile:"",
				fr_name:"",
				shop_name:"",
				yyzz_image:"",//营业执照
				fr_zimage:"",//法人头像面
				fr_fimage:"",//法人国徽面
				
			}
		},
		onLoad() {
			this.getinfo()
		},
		methods: {
			getinfo(){
				httpRequest.request('/api/user/index', 'POST', {}, false, false, true).then(res => {
					if (res.code == 1) {
						if(res.data.shopapply){
							this.shop_name = res.data.shopapply.shop_name
							this.address.province = res.data.shopapply.province_id
							this.address.city = res.data.shopapply.city_id
							this.address.county = res.data.shopapply.area_id
							this.addressdetail = res.data.shopapply.address
							this.fr_name = res.data.shopapply.fr_name
							this.fr_mobile = res.data.shopapply.fr_mobile
							this.yyzz_image = res.data.shopapply.yyzz_image_text
							this.fr_zimage = res.data.shopapply.fr_zimage_text
							this.fr_fimage = res.data.shopapply.fr_fimage_text
							this.area = res.data.shopapply.cityinfo.split('/')
						}
						
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			submit(){
				let _this = this
				let fr_mobile = _this.fr_mobile;
				if (_this.shop_name == "") {
					httpRequest.toast("请输入店铺名称")
					return
				}
				if (_this.area.length == 0) {
					httpRequest.toast("请选择店铺地址")
					return
				}
				if (_this.addressdetail == "") {
					httpRequest.toast("请输入店铺详细地址")
					return
				}
				if (_this.fr_name == "") {
					httpRequest.toast("请输入法人名称")
					return
				}
				if (_this.fr_mobile == "") {
					httpRequest.toast("请输入法人电话")
					return
				}
				if (!fr_mobile.match(/^1\d{10}$/)) {
					httpRequest.toast("请输入有效的手机号码");
					return false;
				}
				if (_this.yyzz_image == "") {
					httpRequest.toast("请上传营业执照")
					return
				}
				if (_this.fr_zimage == "") {
					httpRequest.toast("请上传身份证头像面")
					return
				}
				if (_this.fr_fimage == "") {
					httpRequest.toast("请上传身份证国徽面")
					return
				}
				httpRequest.modal('提示', '确定提交审核吗？', true, (res) => {
					if (res) {
						uni.showLoading({
							title: '请稍候...',
							mask: true
						})
						httpRequest.request('/api/user/shopApply', 'POST', {
							// 传参
							shop_name: _this.shop_name, 
							province_id: _this.address.province, 
							city_id: _this.address.city, 
							area_id: _this.address.county, 
							address: _this.addressdetail, 
							fr_mobile: _this.fr_mobile, 
							fr_name: _this.fr_name, 
							yyzz_image: _this.yyzz_image, 
							fr_zimage: _this.fr_zimage, 
							fr_fimage: _this.fr_fimage, 
						}, false, false, true).then(res => {
							uni.hideLoading()
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								setTimeout(()=>{
									uni.navigateBack(1)
								},1000)
							}
						}).catch(err => {
							uni.hideLoading()
							httpRequest.toast(err.msg);
						})
					}
				})
				
			},
			uploadImg(upimg) {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i],upimg)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i],upimg)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url,upimg) {
				let _this = this;
				httpRequest.uploadFile('/api/Common/upload', url).then(res => {
					let image_item = res.fullurl;
					if(upimg==1){
						this.yyzz_image = image_item
					}else if(upimg==2){
						this.fr_zimage = image_item
					}else{
						this.fr_fimage = image_item
					}
				}).catch(err => {});
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.address.province = area[0].value;
				this.address.city = area[1].value;
				this.address.county = area[2].value;
			},
			// 跳转审核状态页面
			tzshz() {
				uni.navigateTo({
					url: '/pages/mypage/shenheshangjrz'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.neirong{
		padding-bottom: 200rpx;
	}
	.shefz {
		width: 48%;
		height: 291rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yyz {
		width: 100%;
		height: 291rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.inputs {
		width: 60%;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}
	.zdy{
		font-size: 30rpx;
		width: 100%;
	}
	/deep/.selected-item-active{
	      border-bottom: 2px solid #ffc059;
	 }
</style>
